<template>
  <div>
    <a-table
      :dataSource="userList"
      :columns="columns"
      :rowKey="(item) => item.id"
      :scroll="scroll"
    >
      <template slot="type" slot-scope="record">
        <a-switch :checked="record.type == 1" @change="changeRole(record)" />
      </template>
      <template slot="edit" slot-scope="record">
        <a-space>
          <a-popconfirm
            title="确认删除该用户?"
            okText="确认"
            cancelText="取消"
            @confirm="remove(record)"
          >
            <a-button type="danger" icon="delete"></a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </a-table>
  </div>
</template>

<script>
export default {
  mounted() {
    this.getUserList();
    if (document.body.clientWidth <= 1440) {
      this.scroll.x = 900;
    } else {
      this.scroll.x = 0;
    }
    const that = this;
    window.onresize = () => {
      return (() => {
        that.screenWidth = document.body.clientWidth;
      })();
    };
  },
  // 监听屏幕宽度改变
  watch: {
    /* 监听*/
    screenWidth(val) {
      if (val <= 1440) {
        this.scroll.x = 500;
      } else {
        this.scroll.x = 0;
      }
    },
  },
  data() {
    return {
      // 滚动条的配置
      scroll: {
        x: 0,
      },
      screenWidth: document.body.clientWidth, // 屏幕宽度
      // 用户列表
      userList: [],
      // 列名
      columns: [
        { title: "ID", dataIndex: "id" },
        { title: "用户名", dataIndex: "username" },
        { title: "邮箱", dataIndex: "email" },
        { title: "地址", dataIndex: "address" },
        {
          title: "注册时间",
          dataIndex: "register_time",
          sorter: (a, b) =>
            new Date(a.register_time).getTime() -
            new Date(b.register_time).getTime(),
        },
        {
          title: "管理员",
          scopedSlots: { customRender: "type" },
        },
        {
          title: "操作",
          scopedSlots: { customRender: "edit" },
        },
      ],
    };
  },
  methods: {
    // 获取用户列表
    getUserList() {
      this.$axios.get("/api/user/list.php").then((res) => {
        const { data } = res;
        if (data.code === 1) {
          this.userList = data.data;
          this.$message.success(data.msg);
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    // 权限切换
    changeRole(record) {
      const { id, type } = record;
      this.$axios
        .post("/api/user/edit.php", {
          id,
          type: type == 1 ? 0 : 1,
        })
        .then((res) => {
          const { data } = res;
          if (data.code === 1) {
            this.$message.success("更改用户角色成功!");
            record.type = type == 1 ? 0 : 1;
          } else {
            this.$message.error("更改用户角色失败!");
          }
        });
    },
    // 删除用户
    remove({ id }) {
      this.$axios.post("/api/user/remove.php", { id }).then((res) => {
        const { data } = res;
        if (data.code === 1) {
          this.$message.success("删除用户成功!");
          this.getUserList();
        } else {
          this.$message.error("删除用户失败!");
        }
      });
    },
  },
};
</script>
